/**
 * Tabslider 滑动tab组件
 * 
 * Author: lbnnbs@hotmail.com
 * 
 * 0.0.1
 * 
 * 2020/05/06
 * 
 * 初始化
 * var tabslider = $(el).Tabslider({
 *  cssClass: 'tabslider', // 指定tab容器的样式，不指定则默认为tabslider
 *  offsetCssClass: 'tabslider-offset', // 指定tab滑动容器的样式，不指定则默认为tabslider-offset
 *  tabCssClass: 'tabslider-tab', // 指定tab的样式，必须，不指定则默认为tabslider-tab
 *  activeCssClass: 'tabslider-active', // 指定激活状态tab的样式，不指定则默认为tabslider-active
 *  underlineCssClass: 'tabslider-underline', // 指定激活状态tab下边框的样式，不指定则默认为tabslider-underline
 *  afterSlideCallback: function(index, $this) {
 *      // 切换后的回调函数，index是当前slider的索引，$this是当前slider对象本身
 *  }
 *  activeIndex: 0 // 初始显示的index
 * });
 * 
 * api
 * tabslider.slide(index, disableCallback, disableAnimate);
 * index tab索引，disableCallback 是否禁用 afterSlideCallback，disableAnimate 是否禁用滑动动画
 */
;
(function ($) {
    'use strict';

    $.fn.Tabslider = function (options) {
        if (this.length > 1) {
            console.error('Error: more than 1 element be found.');
            return;
        }
        return new Tabslider(this, options);
    };

    var Tabslider = function (element, options) {
        var me = this;
        me.$element = element;
        me.index = 0; // 当前tab的index
        me.init(options);
    };

    // 初始化
    Tabslider.prototype.init = function (options) {

        var me = this;

        me.opts = $.extend(true, {}, {
            cssClass: 'tabslider', // 指定tab容器的样式
            offsetCssClass: 'tabslider-offset', // 指定tab滑动容器的样式
            tabsCssClass: 'tabslider-tabs', // 指定tab容器的样式，必须，默认为tabslider-tabs
            tabCssClass: 'tabslider-tab', // 指定tab的样式，必须，默认为tabslider-tab
            activeCssClass: 'tabslider-active', // 指定激活状态tab的样式
            underlineCssClass: 'tabslider-underline', // 指定激活状态tab下边框的样式
            afterSlideCallback: null, // 换掉切换后的回调函数
            activeIndex: 0 // 初始显示的index
        }, options);

        var $this = this.$element;
        $this.addClass(me.opts.tabsCssClass);
        $this.children().addClass(me.opts.tabCssClass);

        var $tabslider = $('<div class="' + me.opts.cssClass + '"></div>');
        var $tabslider_offset = $('<div class="' + me.opts.offsetCssClass + '"></div>');

        $this.wrap($tabslider).wrap($tabslider_offset);

        // wrap后才设置，因为me.$tabslider是动态创建后添加到页面的
        me.$tabslider = $('.' + me.opts.cssClass);
        me.$tabslider_offset = $('.' + me.opts.offsetCssClass);

        me.$underline = $('<div class="' + me.opts.underlineCssClass + '"></div>')
                .css('width', $this.children().first().width() + 'px');

        $this.append(me.$underline);

        me.tabs_width = $this.width();

        me.offset_width = $('.' + me.opts.offsetCssClass).width();

        $this.on('click', '.' + me.opts.tabCssClass, function () {

            me.slide($(this).index());

        });

        var tabs_left, tabs_start_x, tabs_start_y;

        $this.on('touchstart', function (e) {
            var touch1 = e.originalEvent.targetTouches[0];
            tabs_start_x = touch1.pageX;
            tabs_start_y = touch1.pageY;
            tabs_left = parseInt($(this).css("left"));
        });

        $this.on('touchmove', function (e) {
            var touch2 = e.originalEvent.targetTouches[0];
            var tabs_move_x = touch2.pageX;
            var tabs_move_y = touch2.pageY;

            if (tabs_left + tabs_move_x - tabs_start_x >= 0) {
                $(this).css("left", 0);
            } else if (tabs_left + tabs_move_x - tabs_start_x <= me.offset_width - me.tabs_width) {
                $(this).css("left", me.offset_width - me.tabs_width);
            } else {
                $(this).css("left", tabs_left + tabs_move_x - tabs_start_x);
            }
            if (Math.abs(tabs_move_y - tabs_start_y) > 0) {
                e.preventDefault();
            }
        });

        me.slide(me.opts.activeIndex, true, true);

    };

    Tabslider.prototype.slide = function (index, disableCallback, disableAnimate) {

        var me = this;

        if (index === me.index) {
            return;
        }

        me.index = index;

        var $this = me.$element.children('.' + me.opts.tabCssClass).eq(index);

        var tab_width = $this.width();

        me.$underline.stop(true);

        if (disableAnimate) {
            
            me.$underline.css({left: $this.position().left, width: tab_width});
            
        } else {
            
            me.$underline.animate({left: $this.position().left}, 300);

            me.$underline.animate({width: tab_width}, 100);
        }

        $this.addClass(me.opts.activeCssClass).siblings().removeClass(me.opts.activeCssClass);

        var slider_w = (me.$tabslider.width() - tab_width) / 2;

        var tabslider_offset;

        var current_tab_x = parseInt($this.position().left);

        if (current_tab_x <= slider_w) {

            tabslider_offset = 0;

        } else if (slider_w - current_tab_x <= me.offset_width - me.tabs_width) {

            tabslider_offset = me.offset_width - me.tabs_width;

        } else {

            tabslider_offset = slider_w - current_tab_x;

        }

        if (disableAnimate) {
            me.$element.css({left: tabslider_offset});
        } else {
            me.$element.animate({
                left: tabslider_offset
            }, 300);
        }

        if (typeof (me.opts.afterSlideCallback) === 'function' && !disableCallback) {
            me.opts.afterSlideCallback(index, $this);
        }

    };

})(window.jQuery);